<template>
	<view class="page" :class="getThemeClass">
		<view class="headPosition"></view>
		<view class="header">
			<image :src="`/static/images/my/${getThemeName}/my_bg.png`" class="header-bg-image" mode="widthFix"></image>

			<view class="header-content">
				<view class="header-top u-flex align-center justify-between">
					<template v-if="sign.num != 0">
						<template v-if="sign.status === 0">
							<view class="header-top-item u-m-l-30" style="position: relative;" @click="signIn()">
								<u-image :src="`/static/images/my/${getThemeName}/wqd.png`" width="50" height="50"></u-image>
								<u-badge :offset="[0, -5]" isDot absolute />
							</view>
						</template>
						<template v-if="sign.status === 1">
							<view class="header-top-item u-m-l-30">
								<image :src="`/static/images/my/${getThemeName}/qd.png`" width="50" height="50"
									style="width: 50rpx; height: 50rpx;"></image>
							</view>
						</template>
					</template>
					<!-- <view class="header-top-item u-m-l-30" @click="$u.route('/pages/my/lucky-draw/lucky-draw')">
						<u-image 
							:src="`/static/images/my/${getThemeName}/turntable.png`" 
							width="50"
							height="50"
						></u-image>
					</view> -->
					<view class="header-top-item u-m-l-30" @click="$u.route('/pages/my/settings/settings')">
						<u-image :src="`/static/images/my/${getThemeName}/sz.png`" width="50" height="50"></u-image>
					</view>
				</view>

				<view class="u-flex align-center u-m-t-20">
					<u-avatar :src="userData.avatar" size="180" @click="openWin('/pages/my/info/info')"></u-avatar>
					<view class="u-m-l-30">
						<view class="u-m-t-0">
							<text class="u-font-38 u-m-r-20">{{userData.nickname}}</text>
							<!-- <u-tag :text="userData.level_name" mode="dark" type="success" /> -->
						</view>
						<view class="u-m-t-10 id-tab-no-bg">
							<text class="u-font-24 text-content">邀请码：{{userData.invite_code || 0}}</text>
							<image src="/static/images/copy.png" class="copy-image" @click="copy(userData.invite_code)"
								mode=""></image>
						</view>
						<!-- <view class="u-m-t-10 id-tab-no-bg">
							<text class="u-font-24 line-1 text-content">区块链钱包地址：{{userData.account || '暂无'}}</text>
							<image src="/static/images/copy.png" class="copy-image" @click="copy(userData.account)" mode=""></image>
						</view> -->
						<!-- <view class="u-m-t-10 id-tab-no-bg">
							<text class="u-font-24 line-1 text-content" @click="openUrl(download.wenchang)">
								<text>地址：</text>
								<text class="" style="color: royalblue;">{{download.wenchang || '暂无'}}</text>
							</text>
							<image src="/static/images/copy.png" class="copy-image" @click="copy(download.wenchang)"
								mode=""></image>
						</view> -->
					</view>

				</view>

				<view class="bg">
					<view class="bgall">
						<view @click="$u.route('/pages/my/airdrop-award/airdrop-award')">
							<image src="/static/images/26.png"></image>
							积分
						</view>
						<view @click="$u.route('/pages/my/pending-payment/pending-payment')">
							<image src="/static/images/23.png"></image>
							订单
						</view>
						<view @click="$u.route('/pages/my/settings/settings')">
							<image src="/static/images/24.png"></image>
							设置
						</view>
						<view  @click="$u.route('/pages/my/faq/faq')">
							<image src="/static/images/25.png"></image>
							帮助
						</view>
					</view>
				</view>
				<view class="bg2 u-m-t-50 u-m-b-70">
						<view :class="activeId==1?'active':''" @click="activeId=1">
							藏品管理
						</view>
						<view :class="activeId==2 ?'active':''" @click="activeId=2">
							AI画家
						</view>
				</view>
				
				<view v-if="activeId==1" class="bg3 flex u-flex-wrap u-m-b-70 align-center justify-between">
						<view class="item">
							<image class="lefttop2" src="/static/images/29.png"></image>
							<image src="/static/images/27.png"></image>
							<view class="child">
								<view class="title">机甲战士01</view>
								<view class="sn">NZ0020#067879800165</view>
								<view class="name">大夏</view>
							</view>
						</view>
						<view class="item">
							<image class="lefttop"  src="/static/images/28.png"></image>
							<image src="/static/images/27.png"></image>
							<view class="child">
								<view class="title">机甲战士01</view>
								<view class="sn">NZ0020#067879800165</view>
								<view class="name">大夏</view>
							</view>
						</view>
						<view class="item">
							<image src="/static/images/27.png"></image>
							<view class="child">
								<view class="title">机甲战士01</view>
								<view class="sn">NZ0020#067879800165</view>
								<view class="name">大夏</view>
							</view>
						</view>
						<view class="item">
							<image src="/static/images/27.png"></image>
							<view class="child">
								<view class="title">机甲战士01</view>
								<view class="sn">NZ0020#067879800165</view>
								<view class="name">大夏</view>
							</view>
						</view>
						<view class="item">
							<image src="/static/images/27.png"></image>
							<view class="child">
								<view class="title">机甲战士01</view>
								<view class="sn">NZ0020#067879800165</view>
								<view class="name">大夏</view>
							</view>
						</view>
				</view>
				
								
				<!--
					以下是老版本
				-->
				<view class="u-flex align-center justify-around u-m-t-50" style="display:none">
					<view class="u-flex-col-reverse align-center" @click="$u.route('/pages/my/focus-on/focus-on')">
						<text class="u-font-24 text-content">关注</text>
						<text class="u-font-32 text-bold u-m-b-5 u-m-l-0">{{userAuthor.concern||0}}</text>
					</view>

					<view class="u-flex-col-reverse align-center" @click="$u.route('/pages/my/fans/fans')">
						<text class="u-font-24 text-content">粉丝</text>
						<text class="u-font-32 text-bold u-m-b-5 u-m-l-0">{{userAuthor.fans||0}}</text>
					</view>

					<view class="u-flex-col-reverse align-center" @click="$u.route('/pages/my/i-like/i-like')">
						<text class="u-font-24 text-content">喜欢</text>
						<text class="u-font-32 text-bold u-m-b-5 u-m-l-0">{{userAuthor.my_like||0}}</text>
					</view>

					<view class="u-flex-col-reverse align-center"
						@click="$u.route('/pages/my/browse-history/browse-history')">
						<text class="u-font-24 text-content">浏览历史</text>
						<text class="u-font-32 text-bold u-m-b-5 u-m-l-0">{{history||0}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 画夹 -->
		<view v-if="activeId==2">
			<view class="flex justify-between align-center" style="padding: 0 30rpx;">
				<view class="malltab flex justify-between align-center">
					<view class="text-main size-30" :class="tabcolor == 1 ?'text_green':''" @click="mallcbtn">
						全部
					</view>
					<view class="text-main size-30" :class="tabcolor== 2 ?'text_green':''" @click="marketcbtn">
						视频
					</view>
				</view>
				
				<view class="popBtn" @click="popupShow=!popupShow">
					<image src="/static/images/x.png" style="width: 48rpx; height: 48rpx;"></image>
				</view>
			</view>
			
			<view class="mall_concent" scroll-y="true" v-if="tabcolor == 1">			
				 <u-checkbox-group
				 @change="checkboxGroupChange" 
				 class="styp0"
				>
					<view  class="content-nodata" v-if="imagesList.length<1">
						<image src="/static/images/no_data.png" style="width: 306rpx;height: 248rpx;"></image>
					</view>
					<view style="width: 100%;">
						<view class="content">
							<view class="list pop" v-for="(item, index) in imagesList" :key="index">
								<image mode="widthFix" :src="item.picture_url" @click="detail(item.draw_id)"></image>
								<view class="vv1">
									<u-checkbox :name="item.draw_id" :value="item.draw_id" v-if="checkboxshow" active-color="#cafd5c" v-model="item.activeflag"></u-checkbox>
								</view>
								<view class="progress" v-if="item.status != 4">
									<view class="progress-text">生成中<text>{{item.progress}}%</text></view>
									<view class="progress-bg">
										<view class="progress-bar" :style="'width: ' + item.progress + '%'"></view>
									</view>
								</view>
							</view>
							
						</view>
					</view>
					
				</u-checkbox-group>
				
				<u-toast ref="uToast" />
				
				<u-popup mode="bottom" v-model="popupShow">
					<view class="popup-content">
						<scroll-view scroll-y="true" style="height: 900rpx;">
							<view class="popup-content-box">
								<view class="home-sdchange flex justify-between align-center">
									<view class="sdchange_icon flex justify-between align-center"></view>
									<view class="sdchange_text flex justify-start align-center">
										<image src="/static/images/34.png" class="img-16" mode=""></image>
										<view class="text">画布尺寸</view>
									</view>
								</view>
								<view class="u-p-l-32 u-p-r-32">
									<view class="input2 flex justify-between align-center flex-wrap p2">
										 <view v-for="(item,index) in allSizeRatioList" :key="index" >
											 <view  class="itemJ" :class="item.flag ? 'itemJactive':''" @click="sizeClick(index)">
												<text>{{item.val}}</text>
											 </view>
										 </view>
									</view>
								</view>
								
								<view class="home-sdchange flex justify-between align-center">
									<view class="sdchange_icon flex justify-between align-center"></view>
									<view class="sdchange_text flex justify-start align-center">
										<image src="/static/images/34.png" class="img-16" mode=""></image>
										<view class="text">模型选择</view>
									</view>
								</view>
								<view class="u-p-l-32 u-p-r-32">
									<view class="input2 flex justify-between align-center flex-wrap p2">
										 <view v-for="(item,index) in modelList" :key="index">
											 <view  class="itemJ" :class="allModelList[index].flag ? 'itemJactive':''" @click="modelClick(index)">
												<text>{{item.model_desc}}</text>
											 </view>
										 </view>
										 <view class="itemJ itemS"  @click="modelMoreClick">
											<text>更多</text> <u-icon v-if="modeisClick"name="arrow-up"></u-icon>
											<u-icon v-else name="arrow-down"></u-icon>
										 </view>
									</view>
								</view>
								
								<view class="home-sdchange flex justify-between align-center">
									<view class="sdchange_icon flex justify-between align-center"></view>
									<view class="sdchange_text flex justify-start align-center">
										<image src="/static/images/34.png" class="img-16" mode=""></image>
										<view class="text">风格选择</view>
									</view>
								</view>
								<view class="u-p-l-32 u-p-r-32">
									<view class="input2 flex justify-between align-center flex-wrap p2">
										 <view v-for="(item,index) in styleList" :key="index">
											 <view  class="itemJ" :class="allStyleList[index].flag ? 'itemJactive':''" @click="styleClick(index)">
												<text>{{item.name}}</text>
											 </view>
										 </view>
										 <view   class="itemJ itemS" @click="styleMoreClick">
											<text>更多</text> <u-icon v-if="styleisClick"name="arrow-up"></u-icon>
											<u-icon v-else name="arrow-down"></u-icon>
										 </view>
									</view>
								</view>
								
								<view class="home-sdchange flex justify-between align-center">
									<view class="sdchange_icon flex justify-between align-center"></view>
									<view class="sdchange_text flex justify-start align-center">
										<image src="/static/images/34.png" class="img-16" mode=""></image>
										<view class="text">高级设置</view>
									</view>
								</view>
								<view class="u-p-l-32 u-p-r-32">
									<view class="input2 flex justify-between align-center flex-wrap p2">
										<view>
											<view  class="itemJ" :class="initImage == 'on' ? 'itemJactive':''" @click="initImage=initImage=='on'?'off':'on'">
												<text>有参考图</text>
											</view>
										</view>	
										<view>	
											<view  class="itemJ" :class="initImage == 'off' ? 'itemJactive':''" @click="initImage=initImage=='off'?'on':'off'">
												<text>无参考图</text>
											</view>
										</view>
										<view>
											<view  class="itemJ" :class="character == 'on' ? 'itemJactive':''" @click="character=character=='on'?'off':'on'">
												<text>有角色同人</text>
											</view>
										</view>	
										<view>	
											<view  class="itemJ" :class="character == 'off' ? 'itemJactive':''" @click="character=character=='off'?'on':'off'">
												<text>无角色同人</text>
											</view>
										</view>
										<view>
											<view  class="itemJ" :class="modelFusion == 'on' ? 'itemJactive':''" @click="modelFusion=modelFusion=='on'?'off':'on'">
												<text>有融合模型</text>
											</view>
										</view>	
										<view>	
											<view  class="itemJ" :class="modelFusion == 'off' ? 'itemJactive':''" @click="modelFusion=modelFusion=='off'?'on':'off'">
												<text>无融合模型</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
						<view class="v1 flex justify-between align-center">
							<view class="v2" @click="rest">重置</view>
							<view class="v3"  @click="succ">确定</view>
						</view>
						<!-- <view class="confrim-btn">
							<u-button @click="show = false;">确定</u-button>
						</view> -->
					</view>
				</u-popup>
				
				<view class="u-flex align-center justify-between foot-box">
					<view class="end2">
						<view v-if="checkboxval.length>0">
							已选择{{checkboxval.length}}张
						</view>
						<view v-else>
							共{{imagesList.length}}张
						</view>
					</view>
					<view v-if="checkboxval.length>0" class="u-flex align-center justify-between">
						<!-- <view @click="downloadImages">下载</view>
						<view class="foot-box-l">|</view> -->
						<view @click="deleteImgs">删除</view>
					</view>
					<view class="end1" @click="selectbtn">选择</view>
				</view>
			</view>
						
			<view class="mall_concent" scroll-y="true" v-if="tabcolor == 2">
				<view  class="content-nodata" v-if="aiVideoList.length<1">
					<image src="/static/images/no_data.png" style="width: 306rpx;height: 248rpx;"></image>
				</view>
				
				<view style="width: 100%;">
					<view class="content2">
						<view class="list2 pop" v-for="(item, index) in aiVideoList" :key="index">
							<image mode="widthFix" :src="item.cover" ></image>
							<view class="video-play" @click="videoDetail(item.id)">
								<view class="icon-wrapper">
									<u-icon name="play-right-fill"></u-icon>
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="false" class="content" >
			<view class="flex justify-between align-center u-m-b-30">
				<view class="home-card brown-bg flex align-center"
					@click="$u.route('/pages/my/airdrop-award/airdrop-activity')">
					<u-image :src="`/static/images/newrank.png`" class="kong-top-item-icon-box u-m-l-14" width="70"
						height="70"></u-image>
					<view class="u-m-l-28">
						<view class="u-font-28 text-w-500">活动排行榜</view>
						<view class="u-font-22 u-m-t-10 text-tips">榜一榜二带榜三</view>
					</view>
				</view>
				<view class="home-card brown-bg flex align-center" @click="$u.route('/pages/my/invite/invite')">
					<u-image :src="`/static/images/newmine-share.png`" class="kong-top-item-icon-box" width="100"
						height="100"></u-image>
					<view class="u-m-l-14">
						<view class="u-font-28 text-w-500">邀请分享</view>
						<view class="u-font-22 u-m-t-10 text-tips">三邀亲朋好友来</view>
					</view>
				</view>
			</view>
			<view class="main-card u-p-45 brown-bg">
				<view class="u-flex align-center justify-between">
					<view class="u-flex-col align-center"
						@click="$u.route('/pages/my/pending-payment/pending-payment')">
						<u-image :src="`/static/images/my/${getThemeName}/wmdd.png`" width="55" height="55"></u-image>
						<text class="u-font-24 text-content u-m-t-20">我的订单</text>
					</view>
					<view class="u-flex-col align-center" @click="mycollec">
						<u-image :src="`/static/images/my/${getThemeName}/wdcp.png`" width="60" height="60"></u-image>
						<text class="u-font-24 text-content u-m-t-20">我的藏品</text>
					</view>

					<view class="u-flex-col align-center" @click="$u.route('/pages/my/airdrop-award/airdrop-award')">
						<u-image :src="`/static/images/my/${getThemeName}/qyzh.png`" width="55" height="55"></u-image>
						<text class="u-font-24 text-content u-m-t-20">积分账户</text>
					</view>
					<view class="u-flex-col align-center" @click="$u.route('/pages/my/wallet/wallet')">
						<image src="../../../static/images/111.png" mode="" style="width: 55rpx; height: 55rpx;">
						</image>
						<text class="u-font-24 text-content u-m-t-20">钱包管理</text>
					</view>




				</view>

				<view class="u-flex align-center justify-between u-m-t-50">
					<view class="u-flex-col align-center" @click="$u.route('/pages/my/sell/sell')">
						<u-image :src="`/static/images/my/${getThemeName}/wmcd.png`" width="55" height="55"></u-image>
						<text class="u-font-24 text-content u-m-t-20">我卖出的</text>
					</view>

					<view class="u-flex-col align-center" @click="$u.route('/pages/my/release/release')">
						<u-image :src="`/static/images/my/${getThemeName}/wsjd.png`" width="55" height="55"></u-image>
						<text class="u-font-24 text-content u-m-t-20">我上架的</text>
					</view>
					<view class="u-flex-col align-center" @click="$u.route('/pages/my/transaction/transaction')">
						<u-image :src="`/static/images/my/${getThemeName}/jyjl.png`" width="55" height="55"></u-image>
						<text class="u-font-24 text-content u-m-t-20">交易记录</text>
					</view>
					<view class="u-flex-col align-center" @click="$u.route('/pages/my/giveAway/giveAway')">
						<u-image :src="`/static/images/my/${getThemeName}/wdzz.png`" width="55" height="55"></u-image>
						<text class="u-font-24 text-content u-m-t-20">我的转赠</text>
					</view>

					<view class="u-flex-col align-center" @click="$u.route('/pages/my/my-auction/my-auction')">
						<u-image
							:src="`/static/images/my/${getThemeName}/wdjp.png`" 
							width="55"
							height="55"
						></u-image>
						<text class="u-font-24 text-content u-m-t-20">我的竞拍</text>
					</view>
				</view>
			</view>

			<view class="main-card u-m-t-30 brown-bg">
				<view class="u-flex align-center justify-between">
					<view class="u-flex-col align-center" @click="userData.check === 1? $u.route('/pages/my/verified/verifiedSuccess') : $u.route('/pages/my/verified/verified')">
						<u-image
							:src="`/static/images/my/${getThemeName}/smrz.png`" 
							width="55"
							height="55"
						></u-image>
						<text class="u-font-24 text-content u-m-t-20">实名认证</text>
					</view>
					
					<view class="u-flex-col align-center" @click="$u.route('/pages/my/creator/creator')">
						<u-image
							:src="`/static/images/my/${getThemeName}/ysjrz.png`" 
							width="55"
							height="55"
						></u-image>
						<text class="u-font-24 text-content u-m-t-20">艺术家入驻</text>
					</view>
					
					<view class="u-flex-col align-center" @click="$u.route('/pages/my/casting/casting')">
						<u-image
							:src="`/static/images/my/${getThemeName}/wzzd.png`" 
							width="60"
							height="60"
						></u-image>
						<text class="u-font-24 text-content u-m-t-20">我铸造的</text>
					</view>
					
					<view class="u-flex-col align-center" @click="$u.route('/pages/my/release/release')">
						<u-image
							:src="`/static/images/my/${getThemeName}/wfbd.png`" 
							width="55"
							height="55"
						></u-image>
						<text class="u-font-24 text-content u-m-t-20">我上架的</text>
					</view>
				</view>
			</view>

			<view class="main-card u-m-t-30 bot_fun brown-bg">
				<view class="botfun_item" @click="$u.route('/pages/tabbar/foundry/foundry')">
					<view class="item_left">
						<u-image
							:src="`/static/images/my/${getThemeName}/zhuzao.png`" 
							width="50"
							height="50"
						></u-image>
						<view class="color-call u-m-l-25">用户铸造</view>
					</view>
					<u-icon class="u_icon" name="arrow-right"></u-icon>
				</view>
				<view class="botfun_item" @click="$u.route('/pages/my/logistics-order/logistics-order')">
					<view class="item_left">
						<u-image
							:src="`/static/images/my/${getThemeName}/wuliudingdan.png`" 
							width="50"
							height="50"
						></u-image>
						<view class="color-call u-m-l-25">物流订单</view>
					</view>
					<u-icon class="u_icon" name="arrow-right"></u-icon>
				</view>
				<view class="botfun_item"
					@click="userData.check === 1? $u.route('/pages/my/verified/verifiedSuccess') : $u.route('/pages/my/verified/verified')">
					<view class="item_left">
						<u-image :src="`/static/images/my/${getThemeName}/smrz.png`" width="50" height="50"></u-image>
						<!-- 常见问题 -->
						<view class="color-call u-m-l-25">实名认证</view>
					</view>
					<u-icon class="u_icon" name="arrow-right"></u-icon>
				</view>
				<view class="botfun_item" @click="$u.route('/pages/my/faq/faq')">
					<view class="item_left">
						<u-image :src="`/static/images/my/${getThemeName}/cjwt.png`" width="50" height="50"></u-image>
						<!-- 常见问题 -->
						<view class="color-call u-m-l-25">{{i18n.my19}}</view>
					</view>
					<u-icon class="u_icon" name="arrow-right"></u-icon>
				</view>
				<view class="botfun_item" @click="$u.route('/pages/my/contact/contact')">
					<view class="item_left">
						<u-image :src="`/static/images/my/${getThemeName}/lxwm.png`" width="50" height="50"></u-image>
						<view class="color-call u-m-l-25">联系我们</view>
					</view>
					<u-icon class="u_icon" name="arrow-right"></u-icon>
				</view>
				<view class="botfun_item" @click="$u.route('/pages/my/about-us/about-us')">
					<view class="item_left">
						<u-image :src="`/static/images/my/${getThemeName}/gywm.png`" width="50" height="50"></u-image>
						<!-- 关于我们 -->
						<view class="color-call u-m-l-25">{{i18n.my18}}</view>
					</view>
					<u-icon class="u_icon" name="arrow-right"></u-icon>
				</view>
			</view>
		</view>

		<u-modal class="my-modal" v-model="showSignIn" :content="`签到将获得 ${sign.num} 积分`" title="签到"
			:confirm-color="getMainColor" @confirm="signIn(true)" confirmText="签到" show-cancel-button
			asyncClose></u-modal>

		<bottom-copyright  style="display:none"/>
		<!-- <u-tabbar :list="tabbar" :mid-button="true" inactive-color="#FFFFFF" active-color="#73F6A2"
			mid-button-size="135" bg-color="#000000">
		</u-tabbar> -->
		<u-tabbar
		:list="tabbar" 
		:mid-button="true" 
		:border-top="false"
		inactive-color="#798387"
		active-color="#CAFD5C"
		mid-button-size = "135"
		bg-color="#242424">
		</u-tabbar>
	</view>
</template>

<script>
	import {
		tabbar
	} from "@/common/tabbar.js"
	export default {
		data() {
			return {
				activeId: 1,
				tabbar: tabbar,
				history: '',
				userData: {},
				userAuthor: {},
				sign: {
					num: '0',
					status: 1
				},
				download: {
					wenchang: '',
				},
				showSignIn: false,
				// 画夹
				isMake: false,
				isCheck: 0,
				checkboxshow: false,
				popupShow: false,
				checkboxval:[],
				imagesList: [],
				aiVideoList: [],
				tabbar: tabbar,
				listStatus: 'loading',
				listPages: 1,
				lastPage: 0,
				screening: [],
				param: {
					limit: 18,  //数量
					page: 1,  // 页码
					status: '',  // 作品状态
					uid: '',  // （获取别人的作品列表时可传）
					keyword: '',  //  搜索名称
					size_ratio: '',  // 画面尺寸
					model_code: '',  // 模型
					style: '',  // 风格模型
					init_image: '',  //【on=>有参考图，off=>无参考图】
					character: '',  //【on=>有角色同人，off=>无角色同人】
					model_fusion: '',  //【on=>有融合模型，off=>无融合模型】
				},
				videoParam: {
					limit: 10,  //数量
					page: 1,  // 页码
				},
				videoLastPage: 0,
				tabcolor:1,
				modeisClick:false,
				modelList: [],
				allModelList:[],
				styleisClick:false,
				styleList: [],
				allStyleList:[],
				allSizeRatioList:[],
				initImage: '', //【on=>有参考图，=>无参考图】
				character: '', //【on=>有角色同人，off=>无角色同人】
				modelFusion: '', //【on=>有融合模型，off=>无融合模型】
				initTime: 1000,
			};
		},
		onShow() {
			this.getUserinfo()
			// this.setTabBar()
		},
		onLoad(option) {
			this.getImagesList(1)
			this.getVideoList(1)
			this.getAllSizeRatio()
			this.getAllModelList()
			this.getAllStyle()
		},
		onPullDownRefresh() {
			this.getUserinfo()
			
		},
		onReachBottom() {
			console.log(this.param.page)
			
			if(this.tabcolor == 1){
				if(this.param.page<this.lastPage){
					this.param.page += 1
					this.getImagesList(0)
				}
				else{
					uni.showToast({
						icon:'none',
						title:'到底啦'
					})
				}
			}
			if(this.tabcolor == 2){
				if(this.videoParam.page<this.videoLastPage){
					this.videoParam.page += 1
					this.getVideoList(0)
				}
				else{
					uni.showToast({
						icon:'none',
						title:'到底啦'
					})
				}
			}
			
		},
		methods: {
			getUserinfo() {
				this.$u.api.center_index().then(res => {
					if (res.code == 200) {
						this.history = res.data.history
						this.userData = res.data.user
						this.userAuthor = res.data.authors
						this.sign = res.data.sign
						this.download = res.data.download.download
					}
					uni.stopPullDownRefresh()
				}).catch(err => {
					uni.stopPullDownRefresh()
				})
			},
			signIn(o) {
				if (o) {
					this.$u.api.signUp().then(res => {
						if (res.code == 200) {
							this.getUserinfo()
							uni.showToast({
								icon: 'success',
								title: '签到成功'
							})
							this.showSignIn = false
						}
					})
				} else {
					this.showSignIn = true
				}
			},
			mycollec() {
				uni.switchTab({
					url: '/pages/my/collections/collections'
				})
			},
			getImagesList(op){
				return new Promise((resolve, reject) => {
					this.$u.api.opuslist(this.param).then(res => {
						if(op == 1) {
							this.imagesList = res.data.data
						}
						else {
							this.imagesList = [...this.imagesList,...res.data.data]
						}
						this.imagesList.forEach((item)=>{
							if(item.status != 4){
								item.timer=null,
								item.progress=0,
								item.initTime=1200
							}
						
						})
						// console.log(this.imagesList)
						this.lastPage =  res.data.last_page
						if(this.isMake){
							this.startTimer()
						}
						
					})
				})
			},
			requestApi(index) {
				
				if(this.imagesList[index].progress == 0){
					this.check(index)
					
					// console.log(index, this.imagesList[index].progress)
				}
				else if (this.imagesList[index].progress == 98){
					this.check(index)
				}
				else{
					this.$set(this.imagesList, index,{...this.imagesList[index],progress:this.imagesList[index].progress+2})
				}
					
			},
			startTimer() {
				let that = this
				that.imagesList.forEach((item, index)=>{
					if(item.status != 4){
						// console.log(item.initTime)
						item.timer = setInterval(() => {
							that.requestApi(index);
						}, item.initTime);
					}
					
				})
				
			},
			check(index){
				let ids = [];
				ids.push(this.imagesList[index].draw_id)
				
				this.$u.api.check({
					ids: ids
				}).then(res=>{
					let info = res.data[0]
					if(info.status == 4){
						this.$set(this.imagesList, index,{...this.imagesList[index],progress:100})
						this.$set(this.imagesList, index,{...this.imagesList[index],status:info.status})
						this.$set(this.imagesList, index,{...this.imagesList[index],picture_url:info.picture_url})
						clearInterval(this.imagesList[index].timer);
					}
					else{
						if(this.imagesList[index].progress == 0){
							this.$set(this.imagesList, index,{...this.imagesList[index],progress:this.imagesList[index].progress+2})
						}
						else if(this.imagesList[index].progress == 98) {
							this.$set(this.imagesList, index,{...this.imagesList[index],initTime:2000})
							
						}
					}
				})
			},
			getVideoList(op) {
				let param = this.videoParam
				this.$u.api.videolist(param).then(res => {
					if(op == 1) {
						this.aiVideoList = res.data.data
					}
					else {
						this.aiVideoList = [...this.aiVideoList,...res.data.data]
					}
					this.videlLastPage =  res.data.last_page
					this.aiVideoList.forEach((item)=>{item.flag=false})
					
				})
			},
			getAllModelList(){
				this.$u.api.allmodellist({}).then(res => {
					this.allModelList = res.data
					this.allModelList.forEach((item)=>{item.flag=false})
					this.modelList = this.allModelList.slice(0, 17)
					// console.log(res)
				})
			},
			getAllStyle(){
				this.$u.api.allstylelist({}).then(res => {
					this.allStyleList = res.data
					this.allStyleList.forEach((item)=>{item.flag=false})
					this.styleList = this.allStyleList.slice(0,5)
				})
			},
			getAllSizeRatio(){				
				this.$u.api.allsizeratiolist({}).then(res => {
					res.data.forEach((val)=>{
						this.allSizeRatioList.push({
							val: val,
							flag: false
						})
					})
				})
			},
			modelMoreClick(){
				if(this.modeisClick){
					this.modelList = this.allModelList.slice(0,17)
				}
				else{
					this.modelList = [...this.modelList,...this.allModelList.slice(17)]
				}
				this.modeisClick = !this.modeisClick
			},
			styleMoreClick(){
				if(this.styleisClick){
					this.styleList = this.allStyleList.slice(0,5)
				}
				else{
					this.styleList = [...this.styleList,...this.allStyleList.slice(5)]
				}
				this.styleisClick = !this.styleisClick
			},
			sizeClick(index) {
				this.allSizeRatioList.forEach((item)=>{item.flag=false})
				this.$set(this.allSizeRatioList, index,{...this.allSizeRatioList[index],flag:true})
			},
			modelClick(index) {
				this.allModelList.forEach((item)=>{item.flag=false})
				this.$set(this.allModelList, index,{...this.allModelList[index],flag:true})
			},
			styleClick(index) {
				this.allStyleList.forEach((item)=>{item.flag=false})
				this.$set(this.allStyleList, index,{...this.allStyleList[index],flag:true})
			},
			back(){
				alert(8)
				uni.navigateBack()
			},
			deleteImgs(){
				this.$u.api.delopus({ids: this.checkboxval}).then(res => {
					if(res.status == 'success'){
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						});
						this.param.page = 1
						this.getImagesList(1)
					}
					
				})
			},
			rest(){
				this.allSizeRatioList.forEach((item)=>{
					item.flag = false
				})
				this.allModelList.forEach((item)=>{
					item.flag = false
				})
				this.allStyleList.forEach((item)=>{
					item.flag = false
				})
				this.param.page = 1
				this.param.size_ratio = ''
				this.param.model_code = ''
				this.param.style = ''
				this.initImage = '' //【on=>有参考图，=>无参考图】
				this.character = '' //【on=>有角色同人，off=>无角色同人】
				this.modelFusion = '' //【on=>有融合模型，off=>无融合模型】
			},
			succ(){
				let that = this
				that.popupShow = false
				that.param.page = 1
				that.param.keyword = ''
				this.allSizeRatioList.forEach((item)=>{
					if(item.flag == true){
						that.param.size_ratio = item.val
					}
				})
				this.allModelList.forEach((item)=>{
					if(item.flag == true){
						that.param.model_code = item.model_code
					}
				})
				this.allStyleList.forEach((item)=>{
					if(item.flag == true){
						that.param.style = item.key
					}
				})
				that.param.init_image = this.initImage
				that.param.character = this.character
				that.param.model_fusion = this.modelFusion
				
				this.getImagesList(1)
				
			},
			search() {
				if(this.param.keyword == ''){
					uni.showToast({
						title: '请输入画面描述',
						icon: 'none'
					});
					return false
				}
				this.rest()
				this.getImagesList(1)
			},
			selectbtn(){
				this.checkboxshow = !this.checkboxshow
				if(!this.checkboxshow){
					this.imagesList.forEach((item)=>{item.activeflag = false})
					this.checkboxval = []
				}
			},
			checkboxGroupChange(e){
				this.checkboxval = e
			},
			mallcbtn(){
				this.tabcolor = 1
			},
			marketcbtn(){
				// uni.showToast({
				// 	icon:'none',
				// 	title:'待开放'
				// })
				this.tabcolor = 2
			},
			detail(id){
				uni.navigateTo({
					url: '/pages/tabbar/bazaar/huajia-detail?id=' + id
				})
			},	
			videoDetail(id) {
				uni.navigateTo({
					url: '/pages/tabbar/bazaar/video-detail?id=' + id
				})
			},
			downloadImages() {
			  const imageUrls = []; // 要下载的多张图片链接数组
			  this.imagesList.forEach((item)=>{
				  if(item.activeflag){
					  imageUrls.push(item.picture_url)
				  }
			  })
			  if(imageUrls.length<1){
				  uni.showToast({
						title: '没有选择要下载的图片',
						icon: 'success'
				  });
			  }
			  imageUrls.forEach((url) => {
				uni.downloadFile({
				  url: url,
				  success: (res) => {
					if (res.statusCode === 200) {
					  uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: () => {
						  uni.showToast({
							title: '图片保存成功',
							icon: 'success'
						  });
						},
						fail: () => {
						  uni.showToast({
							title: '图片保存失败',
							icon: 'none'
						  });
						}
					  });
					}
				  },
				  fail: () => {
					uni.showToast({
					  title: '图片下载失败',
					  icon: 'none'
					});
				  }
				});
			  });
			}
		},
		computed: {

		}
	}
</script>

<style lang="scss" scoped>
.item{
	width: 320rpx;
	border-radius: 20rpx;
	overflow: hidden;
	position: relative;
	height: 364rpx;
	margin-bottom: 40rpx;
}
.item image{width: 100%;height: 100%;}
.item image.lefttop{width: 50rpx;height: 30rpx;position: absolute;top: 6rpx;left: 6rpx;z-index: 99999;}
.item image.lefttop2{width: 76rpx;height: 30rpx;position: absolute;top: 6rpx;left: 6rpx;z-index: 99999;}
.item .child{ width: 100%; position: absolute;bottom: 0;left: 0;background: rgba(0,0,0,0.6);border-radius: 20rpx;padding: 24rpx;box-sizing: border-box;}
.item .child .title{font-size: 28rpx;
	font-family: PingFang SC-Bold, PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 33rpx;
}
.item .child .sn{
	background: rgba(202,253,92,0.2);
	border-radius: 188rpx 188rpx 188rpx 188rpx;
	opacity: 1;
	border: 2rpx solid #CAFD5C;
	font-size: 20rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #CAFD5C;
	line-height: 23rpx;
	margin-top: 12rpx;
	margin-bottom: 12rpx;
	width: 250rpx;
	height: 32rpx;
	line-height: 30rpx;
	text-align: center;
	box-sizing: border-box;
}
.item .name{
	font-size: 20rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 23rpx;
}
.bgall{display: flex;justify-content: space-between;align-items: center;width: 100%;padding-top: 114rpx;}
.bg2 view{font-size: 32rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(255,255,255,0.6);
	line-height: 26rpx;
	position: relative;
	display: inline-flex;
	margin-right: 88rpx;
}
.bg2 view.active{
	font-size: 32rpx;
	font-family: PingFang SC-Bold, PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 26rpx;
}
.bg2 view.active::after{
	content: '';
	position: absolute;
	bottom: -25rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 32rpx;
	height: 6rpx;
	background: #CAFD5C;
	border-radius: 72rpx;
}
.bg{
	background:url(../../../static/images/22.png);
	background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
	font-size: 24rpx;
	font-family: PingFang SC-Bold, PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 19rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 28rpx 30rpx 46rpx 30rpx;
	margin-bottom: 10rpx;
	margin-top: 34rpx;
}
.bg image{width: 56rpx;height: 56rpx;display: block;margin-left: auto;margin-right: auto;margin-bottom: 20rpx;}
	.home-card {
		width: 335rpx;
		height: 146rpx;
		border-radius: 24rpx;
		padding: 0 12rpx;
	}

	.page {
		padding-top: 0rpx;
		// background-color: #FBF7F2;
	}

	.mine_back {
		width: 100%;
	}

	.header {
		position: relative;
		padding: calc(var(--status-bar-height) + 30rpx) 30rpx 0rpx;
		z-index: 0;

		.header-bg-image {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
		}

		.header-content {
			position: relative;
			z-index: 1;
		}
	}

	.content {
		padding: 45rpx 30rpx;
		position: relative;
		z-index: 1;
	}

	.bot_fun {
		padding: 40rpx 30rpx;

		.botfun_item {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item_left {
				display: flex;
				align-items: center;
				font-size: 30rpx;
			}

			.u_icon {
				color: #D6D2D3;
			}
		}

		.botfun_item+.botfun_item {
			margin-top: 78rpx;
		}
	}

	.id-tab {
		background-color: rgba(255, 255, 255, .1);
		border: solid 1rpx rgba(255, 255, 255, .5);
		padding: 5rpx 30rpx;
		border-radius: 30rpx;
		display: flex;
		width: max-content;
		max-width: 450rpx;
		align-items: center;
	}

	.id-tab-no-bg {
		// background-color: rgba(255, 255, 255, .1);
		// border: solid 1rpx rgba(255, 255, 255, .5);
		// padding: 5rpx 30rpx;
		border-radius: 30rpx;
		display: flex;
		width: max-content;
		max-width: 450rpx;
		align-items: center;
	}

	.u-flex-col-reverse {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column-reverse !important;
	}
	.vv1{
	 position: absolute;
	 top: 10rpx;
	 right: -15rpx;
	 z-index: 99;
	}
	.v1 {
		padding: 30rpx;
	}
	.v1 .v2{
		width: 330rpx;
		height: 88rpx;
		background: rgba(255,255,255,0.2);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		line-height: 88rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}
	.v1 .v3{
		width: 330rpx;
		height: 88rpx;
		background: #CAFD5C;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		font-size: 28rpx;
		font-family: PingFang SC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 88rpx;
		text-align: center;
	}
	.draw-tag-search {
		position: relative;
		width: 100%;
		height: 80rpx;
		margin-top: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 20rpx;
		
		
		::v-deep .u-input--border {
			border-radius: 22rpx;
			border: 1px solid #333333;
			height: 72rpx;
			background-color: #333333;
		}
		::v-deep uni-input{
			line-height: 2.4em;
			height: 2.4em;
			color: #fff;
		}
		.draw-tag-search-input{
			height: 72rpx;
			border: 1px solid #333333 !important;
		}
		
		.draw-tag-search-icon {
		  position: absolute;
		  top: 0;
		  right: 30rpx;
		  margin-top: 9px; /* 可根据需要调整垂直定位的偏移量 */
		  margin-right: 10px; /* 可根据需要调整水平定位的偏移量 */
		}
		
		
	}

	.popup-content {
		background-color: #242424;
	}
	.foot-box{
		width: 100%;
		padding: 0 30rpx;
		position: relative;
		background-color: #000000;

		left: 50%;
		transform: translateX(-50%);
		height: 126rpx;
		border-top: 1px solid rgba(255, 255, 255, .2);

		.end2{
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(255,255,255,0.8);
			line-height: 33rpx;
		}
		.end1{
			width: 190rpx;
			height: 66rpx;
			border-radius: 98rpx 98rpx 98rpx 98rpx;
			opacity: 1;
			border: 2rpx solid rgba(255,255,255,0.2);
			text-align: center;
			line-height: 66rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		 
		}
		.foot-box-l{padding: 0 10rpx;}
	}
	.u-checkbox-group {
		width: 100%;
	}
		.content-nodata {
			width: 100%;
			text-align: center;
			margin-top: 35%;
		}
	.mall_concent {
		height: 100%;
	}
	.content {
		padding: 30rpx;
		box-sizing: border-box;
		column-count: 3;
		column-gap: 10px;
		width: 100%;
		image {
			width: 100%;
			border-radius: 6rpx;
		}
	  }
	
	  
	  .title {
		margin-left: 15rpx;
		margin-right: 15rpx;
		font-size: 30rpx;
	  }
	  .con {
		margin: 15rpx;
		margin-top: 20rpx;
		display: flex;
		font-size: 26rpx;
		align-items: center;
		justify-content: space-between;
	  }
	  .list {
		break-inside: avoid;
		width: 216rpx;
	  }
	  .content2 {
			padding: 30rpx;
			box-sizing: border-box;
			column-count: 2;
			column-gap: 10px;
			width: 100%;
			.list2 {
				break-inside: avoid;
				width: 324rpx;
				
				image {
					width: 100%;
					border-radius: 6rpx;
					border: solid 2rpx #4b4b4b;
				}
				
				.video-play{
					position: absolute;
					top: 50%;
					left: 50%;
					width: 60rpx;
					height: 60rpx;
					background-color: #4b4b4b;
					border-radius: 50%;
					text-align: center;
					transform: translate(-50%, -50%); /* 将圆点移到元素的中心位置 */
					.icon-wrapper {
					  display: flex;
					  justify-content: center;
					  align-items: center;
					  height: 100%;
					}
				}
			}
	    }
	
		.page {
			background-size: 100% 180rpx;
			background-position: 0 0;
			background-repeat: no-repeat;
			// background-color: #FBF7F2;
	
		}
		
		.malltab{			
			height: 88rpx;			
			z-index: 0;
			
			view{
				width: 100rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				border-radius: 78rpx;
				background: #262626;
				margin-right: 15px;
				font-size: 24rpx;
			}
			.text_green{
				color: #CAFD5C;
				border: 1px solid #CAFD5C;
				
			}
		}
	
		.popup-content-box {
	
			.itemJ{
				width: 214rpx;
				height: 70rpx;
				background: rgba(255,255,255,0.15);
				border-radius: 98rpx 98rpx 98rpx 98rpx;
				opacity: 1;
				border: 2rpx solid rgba(255,255,255,0.1);
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 70rpx!important;
				margin-bottom: 22rpx;
				position: relative;
				overflow: hidden;
			}
			.itemJactive{
				width: 214rpx;
				height: 70rpx;
				border-radius: 98rpx 98rpx 98rpx 98rpx;
				opacity: 1;
				border: 2rpx solid #CAFD5C;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #CAFD5C;
				line-height: 33rpx;
			}
			.itemS{
				background-color: #242424;
				border: 1px solid #4b4b4b;
				text{
					margin-right: 10rpx;
				}
			}
			.home-sdchange{
				width: 100%;
				height: 74rpx;
				border-radius: 10rpx;
				padding: 0 30rpx;
				color: #999999;
				position: relative;
				.img-16 {
					width: 16rpx;
					height: 16rpx;
				}
				.sdchange_icon{
					position: absolute;
					top: -20rpx;
					.metaimg{
						width: 90rpx;
						height: 30rpx;
						padding-left: 15rpx;
					}
				}
				.sdchange_text{
					width: 50%;
					.text{
						font-size: 24rpx;
						font-weight: bold;
						color: rgba(255,255,255,0.8);
						padding-left: 15rpx;
					}
				}
				.sdchange_switch{
					width: 50%;
					height: 54rpx;
					font-size: 22rpx;
					color: #000000;
					padding: 0 20rpx;
					border-radius: 12rpx;
					background: linear-gradient(90deg, #ACF887 0%, #86F9AF 100%, #86F9AF 100%);
				}
				
				.zhuti_switch{
					padding: 0 2rpx;
					background-color: #262626;;
					border: solid 1rpx #262626;;
					border-radius: 12rpx;
					height: 54rpx;
					.zhuti_switch_img {
						border-radius: 6rpx;
					}
					.zhuti_switch_title {
						padding: 0 10rpx;
					}
				}
			}
		}
		
		.progress {
			position: absolute;
			width: 100%;
			padding: 0 20%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			.progress-text {
				text-align: center;
				font-size: 24rpx;
				text {
					padding-left: 10rpx;
					
					color: #caf45c;
				}
			}
			.progress-bg{
				background-color: #3e3e3e;
			}
			.progress-bar {
				margin-top: 20rpx;
				height: 10rpx;
				background-color: #caf45c;
				transition: width 0.3s ease-in-out;
			}
		}
		.loading {
			position: fixed;
			top: 50%;
			left: 50%;
			width: 50rpx;
			height: 50rpx;
			margin-left: -25rpx;
			margin-top: -25rpx;
		}
</style>